@extends('layouts.scaffold')


@section('head')
	{{ HTML::style('styles/meteo.css')}}
	<script type="text/javascript">

		var pagePrefix = location.origin+'/jogo-mina/public/meteo/';
		var pageSufix = '/previsao'; //no caso de estarmos na pagina da intro
		var url;
		var id = {{$id}};

		document.onkeydown = function(e) {
		    if (!e) e = window.event;
		    var keynum = e.keyCode ? e.keyCode : e.which; // IE vs others
		    switch (keynum) {
		        case 37:// case 38:  //key is left or up
		            if (id <= 1) break;  //if is the first do nothing
		            goToPrev(); // function which goes to previous image
		            return false; //"return false" will avoid further events
		        case 39: case 40: //key is left or down
		            if (id >= 22) break; //if last do nothing
		            goToNext(); // function which goes to next image
		            return false; //"return false" will avoid further events
		    }
		    return; //using "return" other attached events will execute
		};

		function goToPrev() {
			id--;
			url = pagePrefix + id + pageSufix;
		    showPage();
		    return false;
		}

		function goToNext() {
			id++
		    if(id == 18 || id == 19)
			{
				url = pagePrefix + id + pageSufix;
			}
			else
			{
				url = pagePrefix + id;
			}
			showPage();
		    return false;
		}

		function showPage() {
		    window.location = url;
		}

	</script>
@endsection

@section('navbar')
	@include('menu.navbar')
@endsection

@section('main')


<div class="peekaboo col-md-1">
	<a href="{{URL::to('meteo/1/previsao')}}" class="btn btn-default"><strong>1</strong></a>
	<a href="{{URL::to('meteo/2/previsao')}}" class="btn btn-default"><strong>2</strong></a>
	<a href="{{URL::to('meteo/3/previsao')}}" class="btn btn-default"><strong>3</strong></a>
	<a href="{{URL::to('meteo/4/previsao')}}" class="btn btn-default"><strong>4</strong></a>
	<a href="{{URL::to('meteo/5/previsao')}}" class="btn btn-default"><strong>5</strong></a>
	<a href="{{URL::to('meteo/6/previsao')}}" class="btn btn-default"><strong>6</strong></a>
	<a href="{{URL::to('meteo/7/previsao')}}" class="btn btn-default"><strong>7</strong></a>
	<a href="{{URL::to('meteo/8/previsao')}}" class="btn btn-default"><strong>8</strong></a>
	<a href="{{URL::to('meteo/9/previsao')}}" class="btn btn-default"><strong>9</strong></a>
	<a href="{{URL::to('meteo/10/previsao')}}" class="btn btn-default"><strong>10</strong></a>
	<a href="{{URL::to('meteo/11/previsao')}}" class="btn btn-default"><strong>11</strong></a>
	<a href="{{URL::to('meteo/12/previsao')}}" class="btn btn-default"><strong>12</strong></a>
	<a href="{{URL::to('meteo/13/previsao')}}" class="btn btn-default"><strong>13</strong></a>
	<a href="{{URL::to('meteo/14/previsao')}}" class="btn btn-default"><strong>14</strong></a>
	<a href="{{URL::to('meteo/15/previsao')}}" class="btn btn-default"><strong>15</strong></a>
	<a href="{{URL::to('meteo/16/previsao')}}" class="btn btn-default"><strong>16</strong></a>
	<a href="{{URL::to('meteo/19/previsao')}}" class="btn btn-default"><strong>17</strong></a>
	<a href="{{URL::to('meteo/20/previsao')}}" class="btn btn-default"><strong>18</strong></a>
	<a href="{{URL::to('meteo/21/previsao')}}" class="btn btn-default"><strong>19</strong></a>
	<a href="{{URL::to('meteo/22/previsao')}}" class="btn btn-default"><strong>20</strong></a>
</div>
<div class="col-md-11">
	
	<div class="col-md-2 leftDiv">
		<div = class="infoDia">
			<div class="group">
				<center><strong><h1 class="lblwhite">Dia</h1></strong></center>
				<div id="day"><center><strong><h1>{{$results->dia}}</h1></strong></center></div>
			</div>
			@if($results->previsao == 1)
				<div>
					<div class="previsao"><center>PREVISÃO METEOROLÓGICA DISPONÍVEL PARA OS PRÓXIMOS 5 DIAS.</center></div>
					<div class="previsao"><center>CUSTA 1 BATERIA.</center></div>
				</div>
			@endif
		</div>
		<footer>
			<center>
				<!--<span ng-switch on="previous_enabled">
					<a ng-switch-when="true" href="{{URL::to('meteo/[[id-1]]/previsao')}}" class="btn btn-primary"><strong><</strong></a>
					<a ng-switch-when="false" href="{{URL::to('meteo/[[id-1]]/previsao')}}" class="btn btn-primary disabled"><strong><</strong></a>
				</span>-->
				@if($id <= 1)
					<a href="{{URL::to('meteo/'.($id-1).'/previsao')}}" class="btn btn-primary disabled"><strong><</strong></a>
				@else
					<a href="{{URL::to('meteo/'.($id-1).'/previsao')}}" class="btn btn-primary"><strong><</strong></a>
				@endif
				<input type="text" name="id" ng-model="id" hidden>
				<!--<span ng-switch on="next_enabled">
					<a ng-switch-when="true"  href="{{URL::to('meteo/[[id+1]]')}}" class="btn btn-primary"><strong>></strong></a>
					<a ng-switch-when="false" href="{{URL::to('meteo/[[id+1]]')}}" class="btn btn-primary disabled"><strong>></strong></a>
				</span>-->
				@if($id == 17 || $id == 18)
					<a href="{{URL::to('meteo/'.($id+1).'/previsao')}}" class="btn btn-primary"><strong>></strong></a>
				@elseif($id >= 22)
					<a href="{{URL::to('meteo/'.($id+1))}}" class="btn btn-primary disabled"><strong>></strong></a>
				@else
					<a href="{{URL::to('meteo/'.($id+1))}}" class="btn btn-primary"><strong>></strong></a>
				@endif
			</center>
		</footer>
	</div>

	@if($results->aBrincar == 1)
	<div id="aBrincar">
		<center><p><strong>TAVA A BRINCAR</strong></p></center>
	</div>
	@endif
	<div class="row col-md-10 weatherReports container">
		<div class="row">
			<div id="left" class="col-md-5 group">
				<center><h3><strong>Mina e Terras Altas</strong></h3></center>
				<center>
					<img src="{{URL::asset('img/meteo/'.$results->minas_terras_altas.'.png')}}">
				</center>
			</div>
			<div id="right" class="col-md-5 group">
				<center><h3><strong>Deserto e Terras Baixas</strong></h3></center>
				<center>
					<img src="{{URL::asset('img/meteo/'.$results->deserto_terras_baixas.'.png')}}">
				</center>
			</div>
		</div>
		<div id="cannyon" class="">
			<div class="col-md-1"></div>
			<div class="col-md-8 group">		
				<h3 class="col-md-4 text-right"><strong>Desfiladeiro</strong></h3>
				<div>
					<h4 class="lblwhite col-md-4 text-right">{{$results->desfiladeiro}}</h4>
				</div>
			</div>
		</div>
	</div>
</div>

@endsection
